<script setup lang="ts">
import {addZero, formatDate} from "~/utils/func";

const rateValue = ref(5)
const srcList = ref([])
const props = defineProps({
	itemData: {
		type: Object,
		default: () => {}
	}
})
const userHeadErrorStatus = ref(false)
const userHeadError = ()=>{
	userHeadErrorStatus.value = true
}
</script>

<template>
	<div class="evaluation-item">
		<div class="user">
			<img v-if="!userHeadErrorStatus" class="user-head" :src="props.itemData.buyerProfile" alt="" @error="userHeadError">
			<span v-else class="user-head-first">{{props.itemData.buyerNickName.substring(0,1)}}</span>
			<div class="name-work">
				<p class="name-info">
					<span class="name">{{props.itemData.buyerNickName}}</span>
					<span class="comp">{{props.itemData.buyerCompany}}</span>
					<span class="orders" v-if="props.itemData.repeatCount>1">回头客*{{props.itemData.repeatCount}}单</span></p>
				<p class="rate">
					<el-rate v-model="props.itemData.score" allow-half void-color="rgba(25, 30, 40, 0.12)" disabled :colors="['#1DBF73','#1DBF73','#1DBF73']"/>
					<span class="rate-num">{{isNaN(props.itemData.score) ? 0 : props.itemData.score.toFixed(1)}}</span>
					<span class="time">{{formatDate(props.itemData.commentTime)}}</span>
				</p>
			</div>
		</div>
		<p>{{props.itemData.comment}}</p>
		<div class="imgs" v-if="props.itemData.commentPics">
			<el-image
					v-for="item of props.itemData.commentPics"
					style="width: 100px; height: 100px"
					:src="item"
					:zoom-rate="1.2"
					:max-scale="7"
					:min-scale="0.2"
					:preview-src-list="srcList"
					:initial-index="4"
					fit="cover"
			/>
		</div>
		<p class="check-more"><span>查看TA对该服务的所有评价</span><img src="~/assets/check-more-icon-2.png" alt=""></p>
	</div>
</template>

<style scoped lang="scss">
.evaluation-item{
	flex: 1;
	padding: 24px 0;
	border-bottom: 1px solid rgba(237, 237, 238, 1);
	&:last-child{
		border-bottom: none;
	}
	.user{
		display: flex;
		align-items: center;
		.user-head{
			width: 50px;
			height: 50px;
			flex: 0 0 50px;
			margin-right: 12px;
			border-radius: 100%;
		}
		.user-head-first{
			width: 50px;
			height: 50px;
			flex: 0 0 50px;
			margin-right: 12px;
			background: #007aff;
			color: #fff;
			border-radius: 100%;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}
		.name-info{
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			.name{
				color: #191E28;
				font-size: 16px;
				font-weight: bold;
				margin-right: 8px;
			}
			.comp{
				color: rgba(25, 30, 40, 0.48);
				font-size: 16px;
			}
			.orders{
				font-size: 12px;
				color: #1DBF73;
				margin-left: 8px;
				border-radius: 4px 4px 4px 4px;
				border: 1px solid #1DBF73;
				padding: 3px 7px;
			}
		}
		.rate{
			display: flex;
			align-items: center;
			.rate-num{
				color: #191E28;
				margin-right: 8px;
				padding-right: 8px;
				line-height: 14px;
				border-right: 1px solid rgba(25, 30, 40, 0.08);
			}
			.time{
				color: rgba(25, 30, 40, 0.48);
			}
		}

	}
	.imgs{
		margin: 8px 12px 0 0;
	}
	.check-more{
		width: 205px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(25,30,40,0.04);
		border-radius: 6px 6px 6px 6px;
		cursor: pointer;
		margin-top: 16px;
		span{
			color: rgba(25,30,40,0.6);
		}
		img{
			width: 7px;
			height: 14px;
			margin-left: 4px;
		}
	}
}
</style>